<template>
	<view class="shoping">
		<u-navbar :is-back="false" :background="background" height="181">
			<view class="slot-wrap">
				<view class="title">订单列表</view>
				<view class="navContent">
					<view class="navContent-item">
						<view class="navName">支付金额总数</view>
						<view class="navNum">
							<u-count-to :start-val="0" :end-val="foodOrderAdminSumVO.actualPayAmount" color="white" font-size="30" bold :decimals="2">
							</u-count-to>
						</view>
					</view>
					<view class="navContent-item">
						<view class="navName">支付糖果总数</view>
						<view class="navNum">
							<u-count-to :start-val="0" :end-val="foodOrderAdminSumVO.actualPaySweet" color="white" font-size="30" bold :decimals="4">
							</u-count-to>
						</view>
					</view>
					<view class="navContent-item">
						<view class="navName">结算糖果数</view>
						<view class="navNum">
							<u-count-to :start-val="0" :end-val="foodOrderAdminSumVO.actualSettledSweets" color="white" font-size="30" bold  :decimals="4">
							</u-count-to>
						</view>
					</view>
					<view class="navContent-item">
						<view class="navName">糖果抵扣现金价</view>
						<view class="navNum">
							<u-count-to :start-val="0" :end-val="foodOrderAdminSumVO.sweetDeductPrice" color="white" font-size="30" bold  :decimals="2">
							</u-count-to>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;position: absolute;bottom: 0;">
				<view class="search">
					<view class="searchBox">
						<u-search placeholder="搜索订单号" v-model="form.orderNo" :show-action="false"
							:clearabled="false">
						</u-search>
						<view class="searchBtn" @click="search()">搜索</view>
					</view>
					<view style="margin-left:30rpx;">
						<u-image :src="require('@/static/shoping/sx.png')" width="37rpx" height="37rpx" mode="aspectFit"
							@click="searchHandle">
						</u-image>
					</view>
					<!-- <view style="margin-left:30rpx;">
						<u-image :src="require('@/static/shoping/add.png')" width="37rpx" height="37rpx"
							mode="aspectFit" @click="addMall()">
						</u-image>
					</view> -->
				</view>

			</view>

		</u-navbar>
		<view class="order-list">
			<view class="order-item" v-for="(item, index) in goodsList" :key="index">
				<view class="u-flex">
					<view class="u-flex-1">
						下单人手机号：{{item.userPhone}}
					</view>
					<view class="" style="color: #357CD4">
						{{ORDERSTATUS[item.orderStatus]}}
					</view>
				</view>
				<view class="">
					订单号：{{item.orderNo}}
				</view>
				<view class="">
					购买数量：{{item.buyNumber}}
				</view>
				<view class="u-flex">
					<view class="u-flex-1">
						实际支付金额：{{item.actualPayAmount}}
					</view>
					<view class="u-flex-1 text-r">
						实际支付糖果数：{{item.actualPaySweet}}
					</view>
				</view>
				<view class="u-flex">
					<view class="u-flex-1">
						优惠金额：{{item.discountAmount}}
					</view>
					<view class="u-flex-1 text-r">
						糖果抵扣金额：{{item.sweetDeductPrice}}
					</view>
				</view>
				<view class="u-flex">
					<view class="u-flex-1">
						总金额：{{item.totalAmount}}
					</view>
					<view class="u-flex-1 text-r">
						订单类型：{{ORDERTYPE[item.orderType]}}
					</view>
				</view>
				<view class="u-flex">
					<view class="u-flex-1">
						核销码：{{item.writeOffCode}}
					</view>
					<view class="u-flex-1 text-r">
						结算状态：{{SETTLESTATUS[item.settleStatus]}}
					</view>
				</view>
				<view class="">
					下单时间：{{item.orderTime}}
				</view>
				<view class="text-r">
					<u-button v-if="item.orderStatus == 6"  class="btn" type="error" size="mini" shape="circle" :plain="true" @click="review(item)">退款审核</u-button>
					<u-button v-if="item.orderStatus==1" class="btn" type="primary" size="mini" shape="circle" :plain="true" @click="receipt(item)">确认核销</u-button>
					<u-button v-if="item.orderType==1" class="btn" type="success" size="mini" shape="circle" :plain="true" @click="toDetailSh(item)">查看详情</u-button>
				</view>
			</view>
		</view>
		<u-popup class="statusBarHeight" v-model="popupShow" mode="right" :safe-area-inset-bottom="true"
			border-radius="20" width="80%">
			<scroll-view scroll-y="true" :style="{height:height+'px'}">
				<view class="popupBody">
					<view class="Classification">
						<view class="title">订单状态</view>
						<view class="ClassificationBody">
							<u-row gutter="16">
								<u-col :span="4" v-for="(item,index) in ORDER_STATUS" :key="index">
									<view class="itemBtn" :class="[index==statusType?'active':'']"
										@click="statusTypeClick(index,item.value)">{{item.label}}</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<u-gap height="10" bg-color="#f2f2f2"></u-gap>
					<view class="Classification">
						<view class="title">订单类型</view>
						<view class="ClassificationBody">
							<u-row gutter="16">
								<u-col :span="4" v-for="(item,index) in ORDER_TYPE" :key="index">
									<view class="itemBtn" :class="[index==statusAudit?'active':'']"
										@click="statusAuditClick(index,item.value)">{{item.label}}</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<u-gap height="10" bg-color="#f2f2f2"></u-gap>
					<view class="Classification">
						<view class="title">结算状态</view>
						<view class="ClassificationBody">
							<u-row gutter="16">
								<u-col :span="4" v-for="(item,index) in SETTLE_STATUS" :key="index">
									<view class="itemBtn" :class="[index==statusSettle?'active':'']"
										@click="statusSettleClick(index,item.value)">{{item.label}}</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<u-gap height="10" bg-color="#f2f2f2"></u-gap>
					<view class="Classification">
						<view class="title">下单人手机号</view>
						<view class="ClassificationBody" style="padding-bottom:30rpx;">
							<u-row gutter="16">
								<u-col :span="12">
									<input class="productCodeBtn" style="border: 1px solid #ccc;" type="text"
										v-model="form.userPhone" placeholder="请输入下单人手机号" @input="search()" />
								</u-col>
							</u-row>
						</view>
					</view>
					<u-gap height="10" bg-color="#f2f2f2"></u-gap>
					<view class="Classification">
						<view class="title">日期</view>
						<view class="ClassificationBody">
							<view>
								<u-input v-model="form.startDate" type="select" border placeholder="请选择开始日期"
									@click="show = true" />
							</view>
							<view style="padding:0 20rpx;">-</view>
							<view>
								<u-input v-model="form.endDate" type="select" border placeholder="请选择结束日期"
									@click="show = true" />
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="popupFooter">
				<view class="btnbg">
					<view class="btnbg-item" style="color: #0094ff;" @click="reset()">重置</view>
					<view class="btnbg-item" style="color: white;" @click="confirm()">确定<text
							style="font-size: 24rpx;">({{total>999999?'10万+':total}}订单)</text></view>
				</view>
			</view>
		</u-popup>
		
		<u-calendar v-model="show" :mode="mode" @change="timeOnchange"></u-calendar>
		<!-- 售后单审核弹窗 -->
		<u-modal v-model="reviewShowSh" title="审核" :show-cancel-button="true" @confirm="reviewtSubmit">
			<view class="review-dialog">
				<u-form :model="formReview" ref="uForm">
					<u-form-item>
						<u-radio-group style="margin: 0 auto;" class="u-flex" v-model="formReview.type">
							<u-radio class="u-flex-1" v-for="(item, index) in radioList" :key="index" :name="item.name"
								:disabled="item.disabled">
								{{ item.label }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item v-show="formReview.type==2">
						<u-input v-model="formReview.msg" input-align="center" placeholder="请输入审核不通过原因"
							type="text" />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
		<!-- 核销订单 -->
		<u-modal v-model="showModalSh" content="请确认是否核销, 是否继续" :showCancelButton="true" cancelText="取消" @confirm="receiptSubmit"></u-modal>
		<u-toast ref="uToast" />

	</view>
</template>
<script>
import dataJs from './data.js'
	export default {
		data() {
			return {
				showModalSh: false,
				reviewShowSh: false,
				show:false,
				mode:'range',
				height: 0,
				foodOrderAdminSumVO: {},
				form: {
					userPhone: '', //下单人手机号
					orderNo: '', //订单号
					orderType:'',//订单类型
					orderStatus: '', //订单状态 0 待付款，1 已付款,2 已使用,3 已取消,4 已退款,5 退款处理中, 6 退款审核（需要显示审核按钮）
					settleStatus: '', //结算状态 0 未结算 1 已结算 2 处理中
					startDate: '', //开始时间
					endDate: '', //结束时间
					page: 1,
					size: 10
				},
				background: {
					background: "url(" + require('@/static/distribution/bg_2.png') + ")",
					backgroundRepeat: 'no-repeat',
					backgroundSize: 'cover'
				},
				goodsList: [],
				
				status: 'loading',
				total: 0,
				delId: '',
				controlsType: '',
				popupShow: false,
				ORDER_STATUS: dataJs.ORDER_STATUS,
				ORDER_TYPE: dataJs.ORDER_TYPE,
				SETTLE_STATUS: dataJs.SETTLE_STATUS,
				statusType: null,
				statusAudit: null,
				statusSettle: null,
				ORDERTYPE: dataJs.ORDERTYPE,
				SETTLESTATUS: dataJs.SETTLESTATUS,
				ORDERSTATUS: dataJs.ORDERSTATUS,
				formReview: {
					type: 1,
					msg: ''
				},
				radioList: [{
						name: 1,
						label: '通过'
					},
					{
						name: 2,
						label: '不通过'
					}
				],
				curItemSh: {}
			}
		},
		onReady() {
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					let height = res.windowHeight;
					//#ifdef APP-PLUS
					_this.height = height - 100;
					//#endif
					//#ifdef H5
					_this.height = height;
					//#endif
				}
			})
		},
		mounted() {
			this.getGoodsList();
		},
		onPullDownRefresh() {
			this.shuaxin();
		},
		onReachBottom() {
			if (this.goodsList.length >= this.total) {
				this.status = 'nomore'
				return;
			}
			this.status = 'loading';
			this.form.page++;
			this.getGoodsList();
			setTimeout(() => {
				if (this.goodsList.length >= this.total) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		methods: {
			// 确认核销
			receipt(row) {
				this.showModalSh = true;
				this.curItemSh = row;
			},
			receiptSubmit() {
				this.$u.offlineApi.scanCode({
					code:this.curItemSh.writeOffCode
				}).then(res => {
					if (res.code == 0) {
						this.reviewShowSh = false;
						uni.showToast({
							icon: 'none',
							title: '审核成功!'
						});
						this.form.page = 1;
						this.goodsList = []
						this.getGoodsList()
					} else {
						this.reviewShowSh = false;
						uni.showToast({
							icon: 'none',
							title: '审核失败!' + res.msg
						});
					}
				})
			},
			// 审核
			review(row) {
				this.reviewShowSh = true;
				this.curItemSh = true;
			},
			reviewtSubmit() {
				this.$u.offlineApi.foodRefundAudit({
					"id": this.curItemSh.id,
					"msg": this.formReview.msg,
					"type": this.formReview.type
				}).then(res => {
					if (res.code == 0) {
						this.reviewShowSh = false;
						uni.showToast({
							icon: 'none',
							title: '审核成功!'
						});
						this.form.page = 1;
						this.goodsList = []
						this.getGoodsList()
					} else {
						this.reviewShowSh = false;
						uni.showToast({
							icon: 'none',
							title: '审核失败!' + res.msg
						});
					}
				})
			},
			//日期选择
			timeOnchange(e){
				this.form.startDate = e.startDate;
				this.form.endDate = e.endDate;
				this.search();
			},
			//订单状态搜索
			statusTypeClick(index, val) {
				if (this.statusType == index) return
				this.statusType = index;
				this.form.orderStatus = val;
				this.search();
			},
			//订单类型搜索
			statusAuditClick(index, val) {
				if (this.statusAudit == index) return
				this.statusAudit = index;
				this.form.orderType = val;
				this.search();
			},
			//结算状态搜索
			statusSettleClick(index, val) {
				if (this.statusSettle == index) return
				this.statusSettle = index;
				this.form.settleStatus = val;
				this.search();
			},
			//确定搜索
			confirm() {
				this.popupShow = false;
			},
			//重置
			reset() {
				this.form = {
					userPhone: '', //下单人手机号
					orderNo: '', //订单号
					orderType:'',//订单类型
					orderStatus: '', //订单状态 0 待付款，1 已付款,2 已使用,3 已取消,4 已退款,5 退款处理中, 6 退款审核（需要显示审核按钮）
					settleStatus: '', //结算状态 0 未结算 1 已结算 2 处理中
					startDate: '', //开始时间
					endDate: '', //结束时间
					page: 1,
					size: 10
				};
				this.statusType = null;
				this.statusAudit = null;
				this.statusSettle = null;
				this.shuaxin();
			},
			searchHandle() {
				this.popupShow = true;
			},
			//操作描述时间轴信息
			operation(item) {
				uni.navigateTo({
					url: `/pages/offline/shoping/operationDesc?desc=${JSON.stringify(item.msgVOList)}`,
					animationType: "slide-in-right"
				})
			},
			shuaxin() {
				this.form = {
					page: 1,
					size: 10,
					userPhone: '', //下单人手机号
					orderNo: '', //订单号
					orderType:'',//订单类型
					orderStatus: '', //订单状态 0 待付款，1 已付款,2 已使用,3 已取消,4 已退款,5 退款处理中, 6 退款审核（需要显示审核按钮）
					settleStatus: '', //结算状态 0 未结算 1 已结算 2 处理中
					startDate: '', //开始时间
					endDate: '', //结束时间
				};
				this.goodsList = [];
				this.form.page = 1;
				this.getGoodsList();
			},
			getGoodsList() {
				this.$u.offlineApi.foodOrderList({
					page: this.form.page,
					size: this.form.size,
					userPhone: this.form.userPhone, //下单人手机号
					orderNo: this.form.orderNo, //订单号
					orderType:this.form.orderType,//订单类型
					orderStatus: this.form.orderStatus, //订单状态 0 待付款，1 已付款,2 已使用,3 已取消,4 已退款,5 退款处理中, 6 退款审核（需要显示审核按钮）
					settleStatus: this.form.settleStatus, //结算状态 0 未结算 1 已结算 2 处理中
					startDate: this.form.startDate, //开始时间
					endDate: this.form.endDate, //结束时间
				}).then(res => {
					if (res.code == 0) {
						this.goodsList = [...this.goodsList, ...res.data.list];
						this.foodOrderAdminSumVO = res.data.foodOrderAdminSumVO;
						this.total = res.extraInfo;
						if (res.extraInfo < 10) {
							this.status = 'nomore'
						}
					}
				})
			},
			search() {
				this.form.page = 1;
				this.goodsList = []
				this.getGoodsList();
			},
			toDetailSh(row) {
				uni.navigateTo({
					url: `./orderDetail?id=${row.id}`
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.statusBarHeight {
		margin-top: var(--status-bar-height);
	}

	.shoping {
		.slot-wrap {
			height: 181px;
			width: 100%;
			.title {
				color: white;
				font-size: 16px;
				font-weight: 700;
				height: 44px;
				line-height: 44px;
				width: 100%;
				text-align: center;
			}

			.navContent {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 100%;
				color: white;
				font-size: 30rpx;
				height: 90px;

				.navContent-item {
					text-align: center;

					.navName {
						padding-bottom: 30rpx;
						font-size: 24rpx;
					}

					.navNum {
						font-weight: bold;
					}
				}
			}
		}

		.search {
			width: 100%;
			background-color: #77A9FD;
			height: 94rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			.searchBox {
				background-color: #EEEEEE;
				display: flex;
				align-items: center;
				border-radius: 30rpx;
				flex: 1;

				.searchBtn {
					width: 99rpx;
					height: 56rpx;
					background-color: #357CD4;
					border-radius: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
					margin-right: 4rpx;
				}
			}
		}

		.card_body_top,
		.displaytwo {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.Classification {
		padding: 20rpx 30rpx 0;
		border-radius: 20rpx;
		background-color: white;
		margin-bottom: 20rpx;

		.title {
			font-weight: bold;
		}

		.ClassificationBody {
			margin: 30rpx 0 20rpx 0;

			.active {
				background-color: #ecf5ff !important;
				border-color: #a0cfff !important;
				color: #2979ff !important;
			}
		}
	}

	.itemBtn {
		width: 100%;
		border-radius: 40rpx;
		text-align: center;
		padding: 12rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		clear: both;
		background-color: #F2F2F2;
		margin-bottom: 20rpx;
		border: 1px solid #F2F2F2;
		box-sizing: border-box
	}

	.popupFooter {
		background: white;
		width: 100%;
		height: 50px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		border-top: 1rpx solid #f2f2f2;
	}

	.btnbg {
		background: url(@/static/shoping/btnbg.png);
		background-repeat: no-repeat;
		height: 40px;
		width: 100%;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btnbg-item {
		flex: 1;
		text-align: center;
	}

	.productCodeBtn {
		border: 1rpx solid #F2F2F2;
		border-radius: 40rpx;
		padding: 12rpx 24rpx;
		font-size: 28rpx;
	}
	.order-list {
		padding-top: 32rpx;
	}
	.order-item {
		margin: 0 30rpx 19rpx 30rpx;
		padding: 20rpx 10rpx 25rpx 20rpx;
		border: 1rpx solid #E6E6E6;
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(160, 159, 159, 0.35);
		border-radius: 11rpx;
		font-size: 28rpx;
		color: #000;
		line-height: 44rpx;
		.btn {
			margin-top: 10rpx;
			margin-right: 10rpx;
		}
	}
	.text-r {
		text-align: right;
	}
</style>
